<template>
  <el-dialog
      v-model="dialogVisible"
      title="新增"
      width="500"
      :before-close="handleClose"
  >
    <el-form :model="form" label-width="auto" style="max-width: 600px">
      <el-form-item label="活动名称">
        <el-input v-model="form.name" />
      </el-form-item>
      <el-form-item label="活动内容">
        <el-input v-model="form.des" />
      </el-form-item>
      <el-form-item label="活动图片" >
        <el-upload
            class="avatar-uploader"
            action="http://localhost:8813/activity/upload"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
        >
          <img v-if="imageUrl" :src="imageUrl" class="avatar" />
          <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
        </el-upload>
      </el-form-item>
      <el-form-item label="开始时间">
        <el-date-picker
            v-model="startDate"
            type="datetime"
            placeholder="Select date and time"
        />
      </el-form-item>
      <el-form-item label="结束时间">
        <el-date-picker
            v-model="endDate"
            type="datetime"
            placeholder="Select date and time"
        />
      </el-form-item>

      <el-button type="primary" plain @click="saveSub()" >提交</el-button>
    </el-form>
  </el-dialog>
  <h1>近期活动</h1>
  <el-button @click="addJ()">新增</el-button>
  <div  class="card-container">
    <el-card style="max-width: 250px;display: inline-block;margin-left:10px" v-for="i in job">

      <img
          :src="i.image"
          style="width: 100%"
      />
      <template #footer>
        <span><router-link :to="{path:'/des',query:{name:i.name}}">{{i.name}}</router-link></span><br>
      </template>
    </el-card>
  </div>
</template>
<script setup>
import {ref} from "vue";
import {ElMessage} from "element-plus";
import axios from "axios";

const startDate = ref('')
const endDate = ref('')
const imageUrl=ref('')
const total=ref(0)

const job = ref(null)
function show(){
  axios.get('http://localhost:8813/activity/list').then(res=>{
    console.log(res)
    job.value=res.data.data
    console.log(job)
  })
}
show()


const form = ref({})
const  dialogVisible=ref(false)

const handleAvatarSuccess = (response, uploadFile) => {
  imageUrl.value = URL.createObjectURL(uploadFile.raw);
  console.log(response)
  form.value.image = response.data;
  console.log(response)
};


const beforeAvatarUpload = (rawFile) => {
  const allowedFormats = ['image/jpeg', 'image/png', 'image/gif'];
  if (!allowedFormats.includes(rawFile.type)) {
    ElMessage.error('图片格式错误，支持的格式为：JPEG, PNG, GIF');
    return false;
  } else if (rawFile.size / 1024 / 1024 > 5) {
    ElMessage.error('图片大小不能超过5MB');
    return false;
  }
  return true;
};




function  addJ(){
  dialogVisible.value=true
}
function saveSub(){
  form.value.startTime=startDate.value
  form.value.endTime=endDate.value
  axios.post('http://localhost:8813/activity/add',form.value).then(res=>{
    if(res.data.code==200000){
      ElMessage({
        type:'success',
        message:'添加成功'
      })
      dialogVisible.value=false
      show()
    }else{
      ElMessage({
        type:'warning',
        message:res.data.message
      })
    }
  })
}
</script>
<style scoped>
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
/* 容器样式 */
.card-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  gap: 20px;
  padding: 20px;
}

/* 每个 card 的样式 */
.custom-card {
  max-width: 250px; /* 限制最大宽度 */
  display: inline-block; /* 每个卡片内联显示 */
  margin-left: 10px;
  margin-bottom: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  background-color: #fff;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* hover 效果 */
.custom-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
}

/* 图片样式 */
.card-image {
  width: 100%;
  height: 160px;
  object-fit: cover; /* 使图片填充区域 */
  border-radius: 10px 10px 0 0; /* 圆角效果，顶部圆角 */
}

/* 卡片底部样式 */
.card-footer {
  padding: 10px;
  color: #333;
  font-size: 14px;
}

/* 标题样式 */
.card-title {
  font-weight: bold;
  color: #ca4ab3; /* 蓝色 */
}

/* 描述样式 */
.card-description {
  color: #999; /* 灰色 */
  font-size: 12px;
}
</style>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>
